<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据大屏</title>

	<script src="{{ url_for('static',path='/js/echarts.min.js') }}"></script>

    <link rel="stylesheet" type="text/css" href="{{ url_for('static',path='/css/test.css') }}" />

    <script src="{{ url_for('static',path='/js/test.js') }}"></script>

    <script src="{{ url_for('static',path='/js/jquery.min.js') }}"></script>

    <style>
        #main4 {
            font-family: 'Arial', sans-serif;
            color: #333;
            line-height: 1.6;
            padding: 20px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        #main4 p {
            margin-bottom: 15px;
        }

        #main4 p:last-of-type {
            margin-bottom: 0;
        }

        #main4 p strong {
            color: #333;
            font-weight: bold;
        }
    </style>
</head>

<body>
  <div class="header">
    <h1 style="text-align:center">数据图表</h1>
      <a class = "back" href="/">返回主界面</a>
  </div>
  <div class="main clearfix">
    <div class="main-left">
        <div class="border-container">
            <div class="name-title">果蔬分类占比</div>
            <div id="main1"></div>
            <span class="top-left border-span"></span>
            <span class="top-right border-span"></span>
            <span class="bottom-left border-span"></span>
            <span class="bottom-right border-span"></span>
        </div>
        <div class="border-container">
            <div class="name-title">各品类果蔬关系热力图</div>
            <div id="main2"></div>
            <span class="top-left border-span"></span>
              <span class="top-right border-span"></span>
              <span class="bottom-left border-span"></span>
              <span class="bottom-right border-span"></span>
        </div>
    </div>

    <div class="main-right">

        <div class="border-container">
            <div class="name-title">六类蔬菜上半年销量</div>
          <div id="main3"></div>
          <span class="top-left border-span"></span>
          <span class="top-right border-span"></span>
          <span class="bottom-left border-span"></span>
          <span class="bottom-right border-span"></span>
        </div>
        <div class="border-container">
            <div class="name-title">结论 </div>
            <div id="main4">
              <p>2020年上半年，我国蔬菜市场呈现以下特点：</p>
              <p>1.上半年蔬菜价格整体呈上升趋势，其中叶菜类涨幅最大，涨幅达20.6%，根茎类涨幅达19.7%，瓜类涨幅达18.5%，菌菇类涨幅达17.5%，豆类涨幅达16.3%，葱姜蒜类涨幅达15.9%。</p>
              <p>2.上半年蔬菜产量整体呈下降趋势，其中叶菜类下降幅度最大，下降幅度达20.6%，根茎类下降幅度达19.7%，瓜类下降幅度达18.5%，菌菇类下降幅度达17.5%，豆类下降幅度达16.3%，葱姜蒜类下降幅度达15.9%。</p>
              <p>3.结果发现花叶类与水生根茎类、花叶类与辣椒类、花叶类与食用菌类有相对较强的负相关性、说明花叶类销量的提高能够对水生根茎类、辣椒类、食用菌类的总销量产生一定程度的挤占，说明花叶类与这些类别互为互补品。</p>
              <p>4.而其他品类之间存在的正负偏向关系均不明显，这与蔬菜本身作为必需品的特征有关，与实际销售规律较为吻合。</p>
            </div>
            <span class="top-left border-span"></span>
              <span class="top-right border-span"></span>
              <span class="bottom-left border-span"></span>
              <span class="bottom-right border-span"></span>
        </div>
    </div>
</div>


    <script>


        fetch("/getdata",{ //相当于从本机服务器发起一个请求,所有host一致的
        // method:"post",
        // body:JSON.stringify({name:'小明'})
    }) //发起一个请求
    .then((response) => response.json())
    .then((data) => {
          //此时绘图
          console.log(data)
          echarts2(data)

  });

        fetch("/getdata1",{ //相当于从本机服务器发起一个请求,所有host一致的
        // method:"post",
        // body:JSON.stringify({name:'小明'})
    }) //发起一个请求
    .then((response) => response.json())
    .then((data) => {
          //此时绘图
          console.log(data)
          echarts1(data)

  });


       fetch("/getdata2",{ //相当于从本机服务器发起一个请求,所有host一致的
        // method:"post",
        // body:JSON.stringify({name:'小明'})
    }) //发起一个请求
    .then((response) => response.json())
    .then((data) => {
          //此时绘图
          console.log(data)
          echarts3(data)

  });

      let value
      let value1
      let value2

      function echarts2(value){
      var myChart = echarts.init(document.getElementById('main1'));

            var option = {

      legend: {
        top: 'bottom'
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: false },
          dataView: { show: false, readOnly: false },
          restore: { show: false },
          saveAsImage: { show: false }
        }
      },
      series: [
        {
          name: 'Nightingale Chart',
          type: 'pie',
          radius: [50, 140],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 8
          },
          data:

            value

        }
      ]
    };
        myChart.setOption(option);
    }


    function echarts1(value1){

      var myChart = echarts.init(document.getElementById('main2'));

      var hours = [
    '水生根茎类', '花叶类', '花菜类', '茄类', '辣椒类', '食用菌'
        ];
        // prettier-ignore
        var days = [
      '食用菌', '辣椒类', '茄类',
      '花菜类', '花叶类', '水生根茎类'
        ];
        // prettier-ignore
<!--         var data = [[0, 0, 0.1], [0, 1, -0.49], [0, 2, -0.24], [0, 3, -0.27], [0, 4, -0.11], [0, 5, 1],[1,0,-0.11],[1,1,-0.5],[1,2,-0.22],[1,3,0.0074],[1,4,1],[1,5,-0.11],[2,0,-0.27],[2,1,-0.06],[2,2,0.13],[2,3,1],[2,4,0.0074],[2,5,-0.11],[3,0,-0.032],[3,1,-0.1],[3,2,1],[3,3,0.13],[3,4,-0.22],[3,5,-0.24],[4,0,-0.42],[4,1,1],[4,2,-0.1],[4,3,-0.06],[4,4,-0.5],[4,5,-0.49],[5,0,1],[5,1,-0.42],[5,2,-0.032],[5,3,-0.27],[5,4,-0.11],[5,5,0.1]]-->
<!--            .map(function (item) {-->
<!--            return [item[1], item[0], item[2] || '-'];-->
<!--        });-->
        var option = {

          tooltip: {
            position: 'top'
          },
          grid: {
            height: '50%',
            top: '10%'
          },
          xAxis: {
            type: 'category',
            data: hours,
            splitArea: {
              show: true
            }
          },
          yAxis: {
            type: 'category',
            data: days,
            splitArea: {
              show: true
            }
          },
          visualMap: {
            min: -1,
            max: 1,
            calculable: true,
            orient: 'horizontal',
            left: 'center',
            bottom: '15%'
          },
          series: [
            {
              name: 'Punch Card',
              type: 'heatmap',
              data: value1,
              label: {
                show: true
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };

      myChart.setOption(option);

      }

        function echarts3(value2){

         var myChart = echarts.init(document.getElementById('main3'));
          var option = {

              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  label: {
                    backgroundColor: '#6a7985'
                  }
                }
              },
              legend: {
                data: ['水生根茎类', '花叶类', '花菜类', '茄类', '辣椒类','食用菌']
              },
              toolbox: {
                feature: {
                  saveAsImage: {}
                }
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: [
                {
                  type: 'category',
                  boundaryGap: false,
                  data: ['一月', '二月', '三月', '四月', '五月', '六月']
                }
              ],
              yAxis: [
                {
                  type: 'value'
                }
              ],
              series: [
                {
                  name: '水生根茎类',
                  type: 'line',
                  stack: 'Total',
                  areaStyle: {},
                  emphasis: {
                    focus: 'series'
                  },
                  data:value2[0]
                },
                {
                  name: '花叶类',
                  type: 'line',
                  stack: 'Total',
                  areaStyle: {},
                  emphasis: {
                    focus: 'series'
                  },
                  data:value2[1]
                },
                {
                  name: '花菜类',
                  type: 'line',
                  stack: 'Total',
                  areaStyle: {},
                  emphasis: {
                    focus: 'series'
                  },
                  data:value2[2]
                },
                {
                  name: '茄类',
                  type: 'line',
                  stack: 'Total',
                  areaStyle: {},
                  emphasis: {
                    focus: 'series'
                  },
                  data:value2[3]
                },
                {
                  name: '辣椒类',
                  type: 'line',
                  stack: 'Total',
                  label: {
                    show: true,
                    position: 'top'
                  },
                  areaStyle: {},
                  emphasis: {
                    focus: 'series'
                  },
                  data:value2[4]
                },
                {
                  name: '食用菌',
                  type: 'line',
                  stack: 'Total',
                  label: {
                    show: true,
                    position: 'top'
                  },
                  areaStyle: {},
                  emphasis: {
                    focus: 'series'
                  },
                  data:value2[5]
                }
              ]
            };
            myChart.setOption(option);

    }


    </script>


</body>
</html>